<template>
  <div>
    <el-table v-bind="$attrs" :data="data" :loading="loading">
      <slot></slot>
      <template v-for="(col, index) in tableColumns" :key="index">
        <el-table-column :type="col.type" :prop="col.key" :label="col.title" :width="col.width" :min-width="col.minWidth"
          :align="col.align" :fixed="col.fixed" :header-align="col.headerAlign" :show-overflow-tooltip="col.tooltip"
          :class-name="col.className" :render-header="col.renderHeader">
          <template v-if="col.slots && col.slots.customTitle" #header="{ column, $index }">
            <slot :name="col.slots.customTitle" v-bind="{ column, $index }"></slot>
          </template>
          <template v-if="col.slots && col.slots.customKey" #default="scope">
            <slot :name="col.slots.customKey" v-bind="scope"></slot>
          </template>
        </el-table-column>
      </template>
      <template #append>
        <slot name="append"></slot>
      </template>
    </el-table>
    <el-row type="flex" justify="end" v-if="page && total > 0">
      <pagination :total="total" v-model:page="searchForm.page" :page-sizes="[5, 10, 20, 50, 100, 200, 500]"
        v-model:limit="searchForm.pageSize" @pagination="onload" />
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    url: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "table",
    },
    tableForm: {
      type: Object,
      default: () => { },
    },
    page: {
      type: Boolean,
      default: true,
    },
    fData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    tableColumns() {
      if (this.type == "table") {
        return this.columns;
      } else {
        return [this.columnCheckBox, ...this.columns];
      }
    },
  },
  data() {
    return {
      columnCheckBox: {
        renderHeader: (h, param) => {
          return h("div", [
            h("Checkbox", {
              props: {
                value: param.column.checkBox,
                disabled: this.type == "radio",
              },
              on: {
                "on-change": (e) => {
                  this.selectAll(e);
                },
              },
            }),
          ]);
        },
        align: "center",
        key: "checkBox",
        width: 50,
        render: (h, params) => {
          return h("div", [
            h("Checkbox", {
              props: {
                value: params.row.checkBox,
              },
              on: {
                "on-change": (e) => {
                  this.select(params.index, e);
                },
              },
            }),
          ]);
        },
      },

      searchForm: {
        // 搜索框初始化对象
        page: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      total: 0,
      data: [],
      loading: true, // 表单加载状态

      selectList: [],
    };
  },
  watch: {
    url: {
      handler() {
        this.init();
      },
      deep: true,
      immediate: true,
    },
    selectList: {
      handler(val) {
        this.data.forEach((items) => {
          // this.$set(items, "checkBox", val.indexOf(items.id) > -1);
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    onload() {
      this.loading = true;
      this.$nextTick(() => {
        request.get(this.url, {params: {
          ...this.tableForm,
          ...this.searchForm,
        }}).then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.data = res.result.records;
            this.total = res.result.total;
          }
        });
      });
    },
    init() {
      if (this.fData.length) {
        this.data = this.fData;
        this.loading = false;
      } else {
        this.searchForm.page = 1;
        this.onload();
        this.selectAll();
      }
    },
    changePage(v) {
      this.searchForm.page = v;
      this.onload();
      this.selectAll();
    },

    setSelectList(val, id) {
      if (this.type == "radio" && val) {
        this.selectList = [id];
      } else if (val) {
        this.selectList.push(id);
      } else {
        this.selectList.splice(this.selectList.indexOf(id), 1);
      }
      this.selectList = Array.from(new Set(this.selectList));
      this.$emit("changeSelect", this.selectList);
    },
    select(index, val) {
      this.setSelectList(val, this.data[index].id);
    },
    selectAll(val = false) {
      this.data.forEach((items) => {
        this.setSelectList(val, items.id);
      });
    },

    changePageSize(v) {
      this.searchForm.page = 1;
      this.searchForm.pageSize = v;
      this.onload();
    },
  },
  mounted() { },
};
</script>

<style></style>